<template>
    <div class="login_div">
        <el-card class="login_card">
        <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      size="default"
      status-icon
      label-position="top"
    >
      <el-form-item label="邮箱📪" prop="email">
        <el-input v-model="ruleForm.email" />
      </el-form-item>
      <el-form-item label="验证码" prop="esayCode" >
        <el-input v-model.number="ruleForm.esayCode" style="width: 50%;"/>
        <el-button @click="getCode">发送验证码</el-button>
      </el-form-item>
      
      
      <el-form-item>
      <el-row :gutter="50">
          <el-col :span="8" :offset="5">
              <el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
          </el-col>
          <el-col :span="2">
              <el-button @click="resetForm(ruleFormRef)">重置</el-button>
          </el-col>
      </el-row>
      </el-form-item>
    </el-form>
    </el-card>
    </div>
</template>
  
<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import axiok from "../../../api/axiok"
import { ElMessage } from "element-plus";
import 'element-plus/dist/index.css'
import axiox from '../../../api/axiox';


const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
esayCode : '',
email : '1078006503@qq.com'
})

const getCode = ref(()=>{
    axiox.get("/auth/login/"+ruleForm.email).then((data)=>{
        
    })
})

const rules = reactive<FormRules>({
email: [
    {type: 'email', required: true,message: '邮箱格式有误',trigger: 'change',}
],
esayCode:[
    {type : 'number' , message:'验证码为4位有效数字', trigger: 'blur' },
    {required: true, message:'请输入验证码', trigger: 'blur' }
]
})

const submitForm = async (formEl: FormInstance | undefined) => {
if (!formEl) return
await formEl.validate((valid, fields) => {
    if (valid) {
        axiok.post("/user/register",ruleForm).then((data)=>{
        if(data.data?.code==200){
        ElMessage.success("请前往邮箱确认")
        }else{
        ElMessage.error(data.data?.msg)
        resetForm(ruleFormRef.value)
        }
        })
    } else {
    console.log('提交失败', fields)
    }
})
}

const resetForm = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
}
</script>

<style>
.login_div{
    background-color: #2C3E50;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 18%;
}
.login_card{
    margin-top: 15%;
    display: flex;
    width: 20%;
}
</style>